<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                Management Player
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <section id="showPlayers">

                </section>

                <!-- Modal popup for creation of a Player -->
                <?php
                    $playerForm = new \TennisTournament\Form\PlayerForm();
                    $playerForm->setAttribute('action', $this->url('player', array('action' => 'add')));
                    $playerForm->prepare();
                ?>
                <div id="addPlayer" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <?php
                        echo $this->form()->openTag($playerForm);
                        echo $this->formHidden($playerForm->get('id'));
                    ?>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h3 id="myModalLabel">Add Player</h3>
                    </div>
                    <div class="modal-body">
                        <?php
                            $playerPicture = $playerForm->get('pathToPicture');
                            echo $this->formLabel($playerPicture);
                            echo $this->formFile($playerPicture);
                            echo $this->formElementErrors($playerForm);
                            echo $this->formRow($playerForm->get('name'));
                            echo $this->formRow($playerForm->get('jobPosition'));
                        ?>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                        <?php echo $this->formRow($playerForm->get('submit')); ?>
                    </div>
                    <?php echo $this->form()->closeTag($playerForm); ?>
                </div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                Management Groups
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                <section class="ui-widget">
                    <section id="groupsPlayers" class="groupsPlayers ui-helper-reset">

                    </section>
                    <button class="btn btn-info"id="addGroupBtn">Add Group</button>
                    <button class="btn btn-success" id="createGroups">Save changes</button>
                    <section id="groups">

                    </section>
                </section>
            </div>
        </div>
    </div>
</div>
<style>
    #groupsPlayers { float: left; width:50%; margin-bottom: 15px;}
    #groups { float: right; width:50%; margin-bottom: 15px;}
</style>
<script type="text/javascript">

    jQuery(document).ready(function() {
       var playerService = new TennisTour.Service.PlayerService();
       var managementService = new TennisTour.Service.ManagementService();
       var urlToSaveGroups = "<?php echo $this->url('group', array('action' => 'createAll')); ?>";
       var collectionPlayers = playerService.parseJSONCollectionToPlayersCollection('<?php echo $this->playersJSON; ?>');
       managementService.managePlayers(collectionPlayers);

       managementService.manageGroups(collectionPlayers, urlToSaveGroups);

    });
</script>